<!--
 * @Author: your name
 * @Date: 2021-10-19 15:27:52
 * @LastEditTime: 2021-10-22 21:09:26
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Vuec:\Users\86131\Desktop\project\payforknowledge\src\views\detail.vue
-->
<template>
  <div class="body-bg">
    <van-nav-bar
      title="课程介绍"
      left-arrow
      :fixed="true"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <div class="banner">
      <img src="../../src/assets/img/课程介绍banner.png" alt="" />
    </div>
    <div class="content">
      <h3>{{ detailList[0]?.title }}</h3>
      <h5>{{ detailList[0]?.position }}<span>热门榜Top3</span></h5>
      <div class="study-box">
        <span>{{ detailList[0]?.pages }}总讲数</span
        ><i>{{ detailList[0]?.num }}人学习</i>
      </div>
      <h4>主理人介绍</h4>
      <div class="introduce">
        <div class="profile">
          <div class="p-top">
            <div class="p-left">
              <img
                src="../../src/assets/img/课程介绍详情页头像.png"
                alt=""
              /><span>{{ detailList[0]?.name }}</span>
            </div>
            <i>+ 关注</i>
          </div>
          <p>
            {{ detailList[0]?.introduce }}
          </p>
        </div>
      </div>
      <div class="highlight">
        <h4>课程亮点</h4>
        <p>
          {{ detailList[0]?.highlights }}
        </p>
      </div>
    </div>
    <div class="footer">
      <van-icon name="star-o" />
      <van-button
        round
        type="primary"
        v-if="detailList[0]?.price > 0"
        @click="addCar"
        >购买课程</van-button
      >
      <van-button
        round
        type="primary"
        style="background-color: #ffb657"
        @click="goclassVideo(detailList[0]?.id)"
        v-else
        >开始阅读</van-button
      >
      <van-icon name="share-o" />
    </div>
  </div>
</template>

<script>
import { useRoute, useRouter } from "vue-router";
import { NavBar, Icon, Button } from "vant";
import { ref } from "vue";
export default {
  components: {
    VanNavBar: NavBar,
    vanIcon: Icon,
    vanButton: Button,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const onClickLeft = () => {
      router.go(-1);
    };
    const onClickRight = () => {
      router.push("/grabble");
    };

    let detailList = ref([]);

    const addCar = () => {
      let token = localStorage.getItem("token");
      let username = localStorage.getItem("username");
      let productId = route.query.id;

      let str = JSON.stringify({
        token,
        username,
        productId,
      });
      fetch("http://1.116.189.101:3000/add", {
        method: "POST",
        body: `str=${str}`,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      })
        .then((response) => response.json())
        .then((res) => {
          console.log(res);
        });
    };

    const getdetail = () => {
      let id = route.query.id;
      fetch("http://1.116.189.101:3000/api/getdetail", {
        method: "post",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        body: `id=${id}`,
      })
        .then((response) => response.json())
        .then((res) => {
          if (res.status === 0) {
            detailList.value = res.result;
            console.log(detailList.value);
          }
        });
    };
    const goclassVideo = (id) => {
      router.push({
        path: "/classVideo",
        query: {
          id,
        },
      });
    };

    getdetail();
    return {
      detailList,
      onClickLeft,
      onClickRight,
      goclassVideo,
      addCar,
    };
  },
};
</script>

<style lang="less" scoped>
.body-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
/deep/ .van-badge__wrapper {
  color: #646464;
  font-weight: bold;
}
/deep/ .van-nav-bar__title {
  font-weight: bold;
}

/deep/ .van-icon-search {
  color: #646464;
  font-weight: bold;
}
.banner {
  margin-top: 45px;
  width: 100%;
  height: 200px;
  img {
    width: 100%;
    height: 200px;
  }
}
.content {
  padding: 10px;
  background-color: #fff;
}
h3 {
  font-size: 16px;
  margin: 0 0 10px 0;
}
h5 {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px #e1e1e1 solid;
  padding-bottom: 5px;
  color: #808080;
}
.study-box {
  width: 100%;
  height: 40px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f2f8fe;
  color: #808080;
  margin: 10px 0;
  padding: 0 5px;
}
h4 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}
.introduce {
  background-color: #f2f8fe;
  width: 100%;
  .profile {
    .p-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 5px;
      border-bottom: 1px #e1e1e1 solid;
      .p-left {
        display: flex;
        align-items: center;
        img {
          width: 50px;
          height: 50px;
        }
        span {
          font-size: 16px;
          font-weight: bold;
          margin-left: 10px;
        }
      }
      i {
        font-size: 10px;
        color: #4ab8fa;
        font-weight: bold;
      }
    }
    p {
      font-size: 16px;
      color: #646464;
      padding: 10px;
    }
  }
}
.highlight {
  margin-top: 10px;
  margin-bottom: 45px;
  p {
    font-size: 16px;
  }
}
.footer {
  padding: 0 15px;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  .van-icon {
    font-size: 18px;
  }
  .van-button {
    height: 25px;
    background-color: #ff7c35;
    border: 0;
    font-size: 12px;
    color: #fefefe;
  }
}
</style>
